<template>
	<div class="list">
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadData">
			<van-card
				v-for="(item, index) in Products"
				:key="item.id"
				:tag="index + 1 + ''"
				:num="item.amount"
				:price="item.price.toFixed(2)"
				:origin-price="item.price.toFixed(2)"
				:title="item.name"
				:thumb="item.coverImage | dalImg"
				@click="toDetail(item.id)"
			></van-card>
		</van-list>
	</div>
</template>

<script>
import { loadPrductsAPI } from '../services/producs';
export default {
	name: 'List',
	data() {
		return {
			Products: [],
			page: 1,
			pages: 1,
			loading: false, //加载状态
			finished: false //是否加载完成
		};
	},
	created() {
		// this.loadData();
	},
	methods: {
		async loadData() {
            if(this.page>this.pages){
                this.finished=true
                return;
            }
            this.loading=true
			const res = await loadPrductsAPI(this.page);
			this.page++;
            this.pages=res.pages;//总页数
			this.Products.push(...res.data);
            this.loading=false
		},
		toDetail(id) {
			this.$router.push({
				name: 'Detail',
				query: {
					id
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
